<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="lib/layui/css/layui.css" />
<script type="text/javascript" src="lib/layui/layui.js"></script>
<style type="text/css">
	.img{
		width: 20px;
		height: 30px;
	}
</style>
</head>
<body>

  <form class="layui-form" action="" onsubmit="return false">
		

		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">请输入商品</label>
				<div class="layui-input-inline">
					<input type="text" id="p_name" name="p_name" 
						autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">价格:</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" id="beginPrice" name="beginPrice" placeholder="￥"
						autocomplete="off" class="layui-input">
				</div>
				<div class="layui-form-mid">-</div>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" id="endPrice" name="endPrice" placeholder="￥"
						autocomplete="off" class="layui-input">
				</div>
				<label class="layui-form-label">产品分类</label>
			<div class="layui-input-inline">
				<select id="p_categoryid" name="p_categoryid" lay-filter="aihao">
					<option value=""></option>
					<option value="1">休闲小吃</option>
					<option value="2">休闲饮品</option>
					
				</select>
				
			</div>
			<div class="layui-input-inline">
				<button type="submit" class="layui-btn" lay-submit="" lay-filter="sousuo">搜索</button>
	<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">添加</button>

			</div>
			</div>
			
			
		</div>
  </form>
		
<div id="div_product2" style="display: none;">
		<form id="upate_prod" lay-filter="upate_prod" class="layui-form" action="">
			<input name="p_id" type="hidden">
			<div class="layui-form-item">
				<label class="layui-form-label">商品名称</label>
				<div class="layui-input-block">
					<input name="p_name" class="layui-input" type="text"
						placeholder="" autocomplete="off" lay-verify="title">
				</div>
			</div>
 
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">价钱</label>
					<div class="layui-input-inline">
						<input name="p_price" class="layui-input" type="tel"
							autocomplete="off">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">折扣价</label>
					<div class="layui-input-inline">
						<input name="p_disprice" class="layui-input" type="tel"
							autocomplete="off">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">口味</label>
					<div class="layui-input-inline">
						<input name="p_kouwei" class="layui-input" type="tel"
							autocomplete="off">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">库存</label>
					<div class="layui-input-inline">
						<input name="p_kucun" class="layui-input" type="tel"
							autocomplete="off">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">品牌</label>
					<div class="layui-input-inline">
						<input name="p_brand" class="layui-input" type="tel"
							autocomplete="off">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">状态</label>
					<div class="layui-input-inline">
						<select id="p_canuse" name="p_canuse" lay-filter="aihao">
							<option value=""></option>
							<option value="1">在售</option>
							<option value="0">下架</option>
						</select>
				</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">上架时间</label>
					<div class="layui-input-inline">
						<input id="asd" name="p_onsaletime" class="layui-input" type="tel"
							autocomplete="off">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">产地</label>
					<div class="layui-input-inline">
						<input name="p_address" class="layui-input" type="tel"
							 autocomplete="off">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">类型</label>
					<div class="layui-input-inline">
						<input name="p_type" class="layui-input" type="tel"
							autocomplete="off">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">保质期</label>
					<div class="layui-input-inline">
						<input name="p_baozhiqi" class="layui-input" type="tel"
							autocomplete="off">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
						<div class="layui-inline">
				<label class="layui-form-label">产品分类:</label>
			<div class="layui-input-inline">
				<select id="p_categoryid" name="p_categoryid" lay-filter="aihao">
				<option value=""></option>
					<option value="1">休闲小吃</option>
					<option value="2">休闲饮品</option>
					
				</select>
			</div>
			</div>
				<div class="layui-inline">
					<label for="cname" class="layui-form-label"> <span class="x-red">*</span>图片
				</label>
					<div class="layui-input-inline">
						<input type="text" id="p_imgs" name="p_img" required="" lay-verify="required" autocomplete="off" class="layui-input">
						<div class="layui-form-item">
						<div class="layui-input-inline">
							<img id="imgFaces" style="width: 120px" id="" src="" > <br />

							<button type="button" class="layui-btn" id="test2">
								<i class="layui-icon">&#xe67c;</i>上传图片
							</button>

						</div>
						<div class="layui-form-mid layui-word-aux">
							<span class="x-red"></span>

						</div>
					</div>
					</div>
					
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" id="update" type="submit" lay-filter="update"
						lay-submit="">立即修改</button>
				</div>
			</div>
		</form>
	</div>




	<!-- ----------------------------------------------------------------------------------------------------------------------------- -->
	<div id="div_product" style="display: none;">
		<form id="fm_product" lay-filter="fm_product" class="layui-form" action="">
			<input name="p_id" type="hidden">
			<div class="layui-form-item">
				<label class="layui-form-label">商品名称</label>
				<div class="layui-input-block">
					<input name="p_name" class="layui-input" type="text"
						placeholder="" autocomplete="off" lay-verify="title">
				</div>
			</div>
 
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">价钱</label>
					<div class="layui-input-inline">
						<input name="p_price" class="layui-input" type="tel"
							autocomplete="off">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">折扣价</label>
					<div class="layui-input-inline">
						<input name="p_disprice" class="layui-input" type="tel"
							autocomplete="off">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">口味</label>
					<div class="layui-input-inline">
						<input name="p_kouwei" class="layui-input" type="tel"
							autocomplete="off">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">库存</label>
					<div class="layui-input-inline">
						<input name="p_kucun" class="layui-input" type="tel"
							autocomplete="off">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">品牌</label>
					<div class="layui-input-inline">
						<input name="p_brand" class="layui-input" type="tel"
							autocomplete="off">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">状态</label>
					<div class="layui-input-inline">
						<select id="p_canuse" name="p_canuse" lay-filter="aihao">
							<option value=""></option>
							<option value="1">在售</option>
							<option value="0">下架</option>
						</select>
				</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">上架时间</label>
					<div class="layui-input-inline">
						<input id="asd" name="p_onsaletime" class="layui-input" type="tel"
							autocomplete="off">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">产地</label>
					<div class="layui-input-inline">
						<input name="p_address" class="layui-input" type="tel"
							 autocomplete="off">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">类型</label>
					<div class="layui-input-inline">
						<input name="p_type" class="layui-input" type="tel"
							autocomplete="off">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">保质期</label>
					<div class="layui-input-inline">
						<input name="p_baozhiqi" class="layui-input" type="tel"
							autocomplete="off">
					</div>
				</div>
			</div>
			<div class="layui-form-item">
						<div class="layui-inline">
				<label class="layui-form-label">产品分类:</label>
			<div class="layui-input-inline">
				<select id="p_categoryid" name="p_categoryid" lay-filter="aihao">
				<option value=""></option>
					<option value="1">休闲小吃</option>
					<option value="2">休闲饮品</option>
					
				</select>
			</div>
			</div>
				<div class="layui-inline">
					<label for="cname" class="layui-form-label"> <span class="x-red">*</span>图片
				</label>
					<div class="layui-input-inline">
						<input type="text" id="p_img" name="p_img" required="" lay-verify="required" autocomplete="off" class="layui-input">
						<div class="layui-form-item">
						<div class="layui-input-inline">
							<img id="imgFace" style="width: 120px" id="" src="" > <br />

							<button type="button" class="layui-btn" id="test1">
								<i class="layui-icon">&#xe67c;</i>上传图片
							</button>

						</div>
						<div class="layui-form-mid layui-word-aux">
							<span class="x-red"></span>

						</div>
					</div>
					</div>
					
				</div>
				
			</div>
			
			
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" id="submit_add" type="submit" lay-filter="add"
						lay-submit="">立即提交</button>
				</div>
			</div>
		</form>
	</div>
	<table id="demo" lay-filter="test"></table>
	
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	<script type="text/html" id="switchOnOff">
    <input type="checkbox" p_id={{d.p_id}} {{d.p_canuse=="1"?"checked":"0"}} name="p_canuse"
           lay-skin="switch"
           lay-filter="switchTest"
           lay-text="上架|下架">
</script>
<script> 
layui.use(['table','layer','form','laydate','upload'], function(){
  var table = layui.table;
  var layer = layui.layer;
  var form = layui.form;
  var $ = layui.$;
  var upload = layui.upload;
  var laydate = layui.laydate;
  var upload = layui.upload;
	  //第一个实例
	  table.render({
	    elem: '#demo'
	   	,id: 'Tableone'
	    ,url: '../getAll' //数据接口
	    ,page: true //开启分页
	    ,cols: [[ //表头
	      {field: 'p_id', width: 80, title: 'ID',sort: true, fixed: 'left'}
	      ,{field: 'p_name',width: 200, title: '商品名称'}
	      ,{field: 'p_img', title: '图片',templet:'<div><img class="img" style="width: 60px" src="../img/{{d.p_img}}" /></div>'}
	      ,{field: 'p_price',width: 50, title: '价钱'} 
	      ,{field: 'p_disprice',title: '折扣价'}
	      ,{field: 'p_kucun', title: '库存'}
	      ,{field: 'p_type', title: '类型'}
	      ,{field: 'p_baozhiqi', title: '保质期'}
	      ,{field: 'p_canuse', title: '状态',align: 'center', templet: '#switchOnOff'}
	      ,{templet:'<div>{{d.category.category_name}}</div>',  title: '分类名称'}
	      ,{field: 'p_onsaletime',width: 150, title: '出厂日期',templet:"<div>{{layui.util.toDateString(d.p_onsaletime)}}</div>"}
	      ,{fixed: 'right', width:190, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
	    ]]
	  });
	  
	  form.on('switch(switchTest)', function(data){
		  console.log(data.id); //得到checkbox原始DOM对象
		  console.log(data.elem); //得到checkbox原始DOM对象
		  console.log(data.elem.checked); //开关是否开启，true或者false
		  console.log(data.value); //开关value值，也可以通过data.elem.value得到
		  console.log(data.othis); //得到美化后的DOM对象\\\
		  if (data.elem.checked ==true) {
			alert(123)
			
		} else {
			alert(321)
		}
		});  
	//上传图片
		var uploadInst = upload.render({
			elem : '#test1',//绑定元素
			acceptMime:'images/*',
			url : '../upload?reqName=UploadImg',//上传接口
			
			done : function(res) {
				//上传完毕回调
				if (res.success) { //把返回的图片名，放到img标记的src里面 
					
					$("#imgFace").attr("src", "../images/" + res.remark); //把返回的图片名，保存在隐藏域里面
					$("#p_img").val(res.remark);
					layer.msg('新图片上传成功', {
						icon : 6,
						time : 1500
					});
				}
			},
			error : function() {
				//请求异常回调
				layer.msg('图片上传失败', {
					icon : 6,
					time : 1500
				});
			}
		});
		var uploadInst = upload.render({
			elem : '#test2',//绑定元素
			acceptMime:'images/*',
			url : '../upload?reqName=UploadImg',//上传接口
			
			done : function(res) {
				//上传完毕回调
				if (res.success) { //把返回的图片名，放到img标记的src里面 
					
					$("#imgFaces").attr("src", "../images/" + res.remark); //把返回的图片名，保存在隐藏域里面
					$("#p_imgs").val(res.remark);
					layer.msg('新图片上传成功', {
						icon : 6,
						time : 1500
					});
				}
			},
			error : function() {
				//请求异常回调
				layer.msg('图片上传失败', {
					icon : 6,
					time : 1500
				});
			}
		});
	  
	  
	  form.on('submit(sousuo)',function(data){
			
			table.reload('Tableone',{
				  where:{
					  p_name: $("#p_name").val(),
					  p_categoryid: $("#p_categoryid").val(),
					  beginPrice: $("#beginPrice").val(),
					  endPrice: $("#endPrice").val()
				  } 
			  ,page: {
					    curr: 1 //重新从第 1 页开始
				  }
				});
				return false;  
			  
		});
	  
	  form.on('submit(demo1)',function(){
		  layer.open({
				 type:1,
				 content:$("#div_product"),
				 area:['700px','700px']
			  });
		  return false;
	  });
	  form.on('submit(add)',function(){
		  $.post("../addprod",$("#fm_product").serialize(),function(res){
			  layer.msg(res.msg);
			  if (res.code == "0") {
				layer.closeAll();
				table.reload("Tableone");
			}
		  },"json");
		  return false;
	  });
	  //修改 
	  form.on('submit(update)',function(){
		  $.post("../updateprod",$("#upate_prod").serialize(),function(res){
			  layer.msg(res.msg);
			  if (res.success) {
      	    	layer.msg(res.msg,{icon:1,time:2000});   	
				} else {
					layer.msg(res.msg,{icon:1,time:2000});
				}
			  layer.closeAll();
			  table.reload("Tableone");
		  },"json");
		  
		  return false;
	  });
	  
	  
	  laydate.render({
		    elem: '#asd' //指定元素
		  });
	  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
		  var data = obj.data; //获得当前行数据
		  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
		  
		  if(layEvent === 'detail'){ //查看
			  $("#submit_add").hide();
			 
			  form.val("fm_product",data);
			  layer.open({
				  type:1,
				  content:$("#div_product"),
				  area:['800px','600px']
			  });
		  }else if(layEvent === 'del'){  //删除
		      layer.confirm('真的删除行么', function(index){
		    	  $.post("../delprod",{
	            	  p_id:data.p_id
	            	},function(res){
	            	    if (res.success) {
	            	    	layer.msg(res.msg,{icon:1,time:2000});   	
						} else {
							layer.msg(res.msg,{icon:1,time:2000});
						}
	            	    table.reload("Tableone");
	            	},"json");
		        });
		      } else if(layEvent === 'edit'){ //编辑
		    	  form.val("upate_prod",data);
				  layer.open({
					  type:1,
					  content:$("#div_product2"),
					  area:['800px','600px']
				  });
				  
		  }
		});
	  
	});
</script>
</body>
</html>